import { Component } from 'react';
import { connect } from 'dva';
import { Layout, Menu } from 'antd';
import { withRouter } from 'umi';
import styles from './manageLayout.css';
import { createManageMenu } from 'config';
import ErrorPage from '../pages/404';

const { Sider, Content } = Layout;


class ManageLayout extends Component {
    constructor(props) {
        super(props)
        this.defaultMenuInfo = {
            selectItem: null,
            openItem: null,
        }
    }

    // componentDidUpdate(prevProps) {
    //     if (this.props.location !== prevProps.location) {
    //         const { userType, location } = this.props;
    //         const manageMenu = createManageMenu(userType);
    //         const { selectItem } = this.findSelectedItem(location, manageMenu);
    //         if (!selectItem || selectItem === "") {
    //             console.warn('管理中心菜单栏定位为空！');
    //             this.props.dispatch({ type: 'manageCenter/save', payload: { lastManagePath: '', lastPathState: null } });
    //         }
    //     }
    // }


    findItem(router, targetItem, parentKey = null) {
        let element = null;
        let openKey = parentKey;
        for (let index = 0; index < router.length; index++) {
            element = router[index];
            if (element.key === targetItem) {
                return { element, openKey };
            }
            if (!element.hasOwnProperty('children')) {
                element = null;
                continue;
            }
            ({ element, openKey } = this.findItem(element.children, targetItem, element.key));
            if (element) {
                return { element, openKey };
            }
        }
        return { element, openKey }
    }

    findSelectedItem(location, router) {
        if (!router || router.length === 0) {
            return { selectItem: null, openItem: null }
        }
        let selectItem = null;
        let openItem = null;
        const pathList = location.pathname.split('/').filter(_ => _ !== "");
        for (let index = pathList.length - 1; index > 0; --index) {
            const { element, openKey } = this.findItem(router, pathList[index]);
            selectItem = element, openItem = openKey
            if (selectItem) {
                break;
            }
        }
        return { selectItem: selectItem && selectItem.key, openItem: openItem || (selectItem && selectItem.key) }
    }

    render() {
        const { userType, location, children } = this.props;
        const manageMenu = createManageMenu(userType);
        const { selectItem, openItem } = this.findSelectedItem(location, manageMenu);
        if (!selectItem || selectItem === "") {
            this.props.dispatch({ type: 'manageCenter/save', payload: { lastManagePath: '', lastPathState: null } });
            return <ErrorPage/>
        }

        return (<Layout>
            <Sider>
                <Menu
                    theme="dark" mode="inline"
                    defaultOpenKeys={[openItem]} defaultSelectedKeys={[selectItem]}
                    items={manageMenu}
                />
            </Sider>
            <Content className={styles.content}>
                <br />
                <div className={styles.page}>
                    {children}
                </div>
            </Content>
        </Layout>)
    }
}

export default withRouter(connect(({ user }) => ({
    userType: user.userInfo.userType
}))(ManageLayout));